import React, {Component} from "react";
import { Table } from 'antd';
import ResizableTitle from './Resizable';

class ResizableTable extends Component {

    components = {
        header: {
            cell: ResizableTitle
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            pagination: this.props.config['pagination'],
            columns: this.props.config['columns']
        }
    }

    componentDidMount() {
        const { params, pagination } = this.props.config;
        this.getTableList(params, pagination);

        this.props.onRef && this.props.onRef(this)
    }

    render() {
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                onResize: this.handleResize(index),
            })
        }));
        const { loading, pagination, data } = this.state;
        return (
            <div className="table-box">
                <Table bordered
                       scroll={{ x: '100%' }}
                       rowKey={row => row.id}
                       loading={loading}
                       components={this.components}
                       columns={columns}
                       dataSource={data}
                       onChange={this.handleChange}
                       pagination={{
                           ...pagination,
                           showSizeChanger: true,
                           showQuickJumper: true,
                           pageSizeOptions: [15, 30, 50, 100],
                           showTotal: (total) => `共${total}条数据`
                       }}
                />
            </div>
        );
    }

    // 拖动改变列宽
    handleResize = index => (e, { size }) => {
        this.setState(({ columns }) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width,
            };
            return { columns: nextColumns };
        });
    };

    // 分页、排序、筛选变化时触发
    handleChange = (pagination, filters, sorter) => {
        const { params } = this.props.config;
        this.getTableList({
            ...params,
            sortName: sorter.field || params.sortName,
            sortType: sorter.order || params.sortType
        }, pagination);
        this.props.config['pagination'] = {...pagination}
    };

    // 获取数据
    getTableList = (params = {}, pagination = {}) => {
        const { request } = this.props.config;
        this.setState({
            loading: true
        });
        this.axios({
            ...request,
            data: {
                currentPage: pagination['current'],
                pageSize: pagination['pageSize'],
                ...params
            }
        }).then(res => {
            this.setState({
                loading: false,
                pagination: {
                    ...pagination,
                    total: res.total || ((res.data && res.data.total) || 0)
                },
                data: (res.rows || res.data.rows) || []
            })
        })
    }
}

export default ResizableTable;
